import { useEffect } from 'react';
import { Leafer, Rect } from 'leafer-ui';

const LeaferView = () => {
    useEffect(() => {
        const leafer = new Leafer({ view: 'leafer-view' });

        const rect = new Rect({
            x: 100,
            y: 100,
            width: 100,
            height: 100,
            fill: '#32cd79',
            cornerRadius: [50, 50, 0, 50], // 左上、右上、左下、右下
            draggable: true,
        });

        leafer.add(rect);

        return () => {
            leafer.destroy();
        };
    });
    return (
        <div
            id="leafer-view"
            style={{
                position: 'absolute',
                top: 0,
                left: 0,
                width: '100%',
                height: '100%',
            }}
        ></div>
    );
};

export default LeaferView;
